<template>
  <div>
    <Editor
      :id="editorId"
      v-model="myValue"
      :init="init"
      :disabled="disabled"
    ></Editor>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue' // 编辑器引入
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，
// import { debounce } from '@/utils'
import { upload } from '@/api/accountInfos'
import 'tinymce/themes/silver/theme' // 编辑器主题
import 'tinymce/icons/default' // 引入编辑器图标icon
import 'tinymce/plugins/textcolor' // 颜色
import 'tinymce/plugins/advlist' // 高级列表
import 'tinymce/plugins/lists' // 列表插件
// import 'tinymce/plugins/autolink' // 自动链接
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/image' // 插入编辑图片
import 'tinymce/plugins/charmap' // 特殊字符
import 'tinymce/plugins/media' // 插入编辑媒体
import 'tinymce/plugins/wordcount' // 字数统计
// import 'tinymce/plugins/table'
// import 'tinymce/plugins/fullscreen'
// import 'tinymce/plugins/preview'
// import 'tinymce/plugins/imagetools'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.inline.min.css'


export default {
  props: {
    instance: Object,
    // 内容
    value: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 插件
    plugins: {
      type: [String, Array],
      // default: 'advlist autolink link image lists charmap imagetools preview'
      default: 'lists, advlist, image ,link'
    },
    // 工具栏
    toolbar: {
      type: [String, Array],
      default: `undo redo |
        formatselect |
        forecolor backcolor bold italic |
        alignment bullist numlist |
        outdent indent lists image |
        fullscreen |
        preview | fontsizeselect | link`
    }
  },
  data() {
    return {
      editorId: '',
      init: {
        selector: '',
        language_url: '/tinymce/langs/zh_CN.js', // 汉化路径是自定义的，一般放在public或static里面
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // 皮肤
        content_css: 'tinymce/skins/ui/oxide/content.inline.css',
        plugins: this.plugins, // 插件
        // 工具栏
        toolbar: this.toolbar,
        // 工具栏内容的插件
        menubar: false,
        convert_urls: false,
        images_upload_url: '/system/file/pop',
        importcss_append: true,
        toolbar_location: '/',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
        toolbar_groups: {
          alignment: {
            icon: 'align-left',
            tooltip: 'alignment',
            items: 'alignleft aligncenter alignright alignjustify'
          }
        },
         images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          upload(formData).then(res => {
            if (res.data) {
              // console.log('res.data', res.data[0])
              success(res.data[0].filePath)
              return
            }
            failure('上传失败')
          }).catch(() => {
            failure('上传出错')
          })
        },
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px', // 字体大小
        // font_formats: fonts.join(';'), // 引入字体如['宋体=宋体','微软雅黑=微软雅黑'],
        height: 200, // 高度
        indentation: '20px', // 缩进
        placeholder: '输入内容描述...',
        branding: false, // 隐藏右下角技术支持
        elementpath: false // 隐藏底栏的元素路径
      },
      myValue: '',
      fb: null
    }
  },
  components: {
    Editor
  },
  watch: {
    instance: {
      handler(nVal) {
        if(nVal) {
         this.myValue = nVal.defaultValue
        }
      },
      immediate: true,
      deep: true
    }
    // !! 阅读源码确认是否对监听的行为没有缓存
    // myValue() {
    //   debounce(this.listenVal, 1000)
    // }
  },
  created() {
    this.$watch('myValue', this.listenVal)
    this.editorId = this.instance.prop
  },
  mounted() {
    Object.assign(this, { ...this.instance }) // 把传入的参数，融合到this中
    tinymce.init({})
  },
  methods: {
    listenVal(v) {
      this.$emit('change', v)
    }
  }
}
</script>
